<template>
  <div v-loading="loading" class="AddOrUpdate_main add_container column_three">
    <div class="main_main">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="供应商编码" prop="code">
          <CodeRuleInput :band-value.sync="formData.code" table-name="purchase_supplier" column-name="code" :is-edit="id" />
        </el-form-item>
        <el-form-item label="供应商名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="简称" prop="simpleName">
          <el-input v-model="formData.simpleName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="供应商类别" prop="categoryCode">
          <DictSelect :band-value.sync="formData.categoryCode" dict-type="supplierType" />
        </el-form-item>
        <el-form-item label="所属业务员" class=" clickChoose">
          <MultiUserSelect
            ref="MultiUserSelect"
            :parent="this"
            id-key="belongBysStr"
            name-key="belongBysName"
          />
        </el-form-item>
        <el-form-item label="引入日期" prop="introduceTime">
          <el-date-picker
            v-model="formData.introduceTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择"
            :editable="false"
          />
        </el-form-item>
        <el-form-item label="备注" class="double">
          <el-input
            v-model="formData.remark"
            type="textarea"
            maxlength="200"
            show-word-limit
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item v-if="isShow" label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-divider />
        <!--        <div class="formItem_header">财务信息</div>-->
        <!--        <el-form-item label="计税方式" prop="taxTypeCode">-->
        <!--          <DictSelect :band-value.sync="formData.taxTypeCode" dict-type="taxTypeCode" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="税率%" prop="taxRateCode">-->
        <!--          <DictSelect :band-value.sync="formData.taxRateCode" dict-type="taxRateCode" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="结算方式" prop="settlementTypeCode">-->
        <!--          <DictSelect :band-value.sync="formData.settlementTypeCode" dict-type="settlementTypeCode" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="结算币别" prop="settlementCurrencyCode">-->
        <!--          <DictSelect :band-value.sync="formData.settlementCurrencyCode" dict-type="settlementCurrencyCode" />-->
        <!--        </el-form-item>-->
        <!--        <el-divider />-->
        <div class="formItem_header">联系信息</div>
        <el-form ref="form" :model="formData" :rules="rules" :inline="true">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="formData.contacts" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="formData.phone" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="传真" prop="fax">
            <el-input v-model="formData.fax" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="公司网址" prop="companyUrl">
            <el-input v-model="formData.companyUrl" placeholder="请输入" clearable />
          </el-form-item>
          <el-divider />
        </el-form>
        <div class="formItem_header">
          银行信息
          <div class="formItem_header_operate">
            <a class="formItem_header_operate_item" @click="add1">
              <svg-icon icon-class="新增" />
              <div class="item_name">添加</div>
            </a>
            <a class="formItem_header_operate_item delete" @click="remove1">
              <svg-icon icon-class="删除" />
              <div class="item_name">删除</div>
            </a>
          </div>
        </div>
        <div ref="table_container" class="table_container">
          <el-table
            ref="table"
            :data="tableData1"
            stripe
            border
            @selection-change="selectionChange1"
          >
            <el-table-column type="selection" align="center" width="50" />
            <el-table-column
              prop="bankAccount"
              label="银行账号"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.bankAccount" placeholder="请输入" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="accountName"
              label="账户名称"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.accountName" placeholder="请输入" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="dueBank"
              label="收款银行"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.dueBank" placeholder="请输入" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="注意事项"
              label="注意事项"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.announcements" placeholder="请输入" clearable />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-divider />
        <div class="formItem_header">
          退货信息
          <div class="formItem_header_operate">
            <a class="formItem_header_operate_item" @click="add2">
              <svg-icon icon-class="新增" />
              <div class="item_name">添加</div>
            </a>
            <a class="formItem_header_operate_item delete" @click="remove2">
              <svg-icon icon-class="删除" />
              <div class="item_name">删除</div>
            </a>
          </div>
        </div>
        <div ref="table_container" class="table_container table_container1">
          <el-table
            ref="table"
            :data="tableData2"
            stripe
            border
            :header-cell-class-name="headerCellClassName"
            @selection-change="selectionChange2"
          >
            <el-table-column type="selection" align="center" width="70" />
            <el-table-column
              prop="deliveryTypeCode"
              label="交货方式"
              min-width="140"
            >
              <template slot-scope="scope">
                <DictSelect :band-value.sync="scope.row.deliveryTypeCode" dict-type="deliveryTypeCode" />
              </template>
            </el-table-column>
            <el-table-column
              prop="consignee"
              label="收货人"
              min-width="140"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.consignee" placeholder="请输入" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="contract"
              label="联系方式"
              min-width="140"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.contract" placeholder="请输入" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="receiveAddress"
              label="收货地址"
              min-width="200"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.receiveAddress" placeholder="请输入" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="announcements"
              label="注意事项"
              min-width="200"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.announcements" placeholder="请输入" clearable />
              </template>
            </el-table-column>
            <el-table-column
              prop="default"
              label="默认"
              width="80"
            >
              <template slot-scope="scope">
                <el-radio
                  v-model="tableDefaultRow"
                  :label="scope.$index"
                  @change.native="chooseDefault(scope.row,scope.$index)"
                >&nbsp;</el-radio>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo } from '@/api/purchaseManage/supplierInfo'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      loading: true,
      isShow: false,
      formData: {
        id: undefined,
        code: undefined,
        name: undefined,
        simpleName: undefined,
        categoryCode: undefined,
        introduceTime: undefined,
        remark: undefined,
        taxTypeCode: undefined,
        taxRateCode: undefined,
        settlementTypeCode: undefined,
        settlementCurrencyCode: undefined,
        contacts: undefined,
        phone: undefined,
        address: undefined,
        email: undefined,
        fax: undefined,
        companyUrl: undefined,
        status: '1',
        belongBysStr: '',
        belongBysName: '',
        returnGoodsList: [],
        bankList: []
      },
      tableData1: [],
      tableData2: [],
      selectionsAll1: [],
      selectionsAll2: [],
      tableDefaultRow: null,
      rules: {
        name: [
          { required: true, message: '供应商名称不能为空', trigger: 'change' }
        ],
        code: [
          { required: true, message: '供应商编码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.formData.belongBys = this.$store.state.user.userId + ''
    this.formData.belongBysName = this.$store.state.user.userName
    this.$refs.MultiUserSelect.setDefaultData()
    if (this.id) { // 有id就是编辑
      this.getInfo()
    } else {
      this.loading = false
    }
  },
  methods: {
    // headerCellClassName(data) {
    //   if (['deliveryTypeCode', 'consignee', 'contract', 'receiveAddress'].indexOf(data.column.property) != -1) {
    //     return 'column_bt'
    //   }
    // },
    selectionChange1(rows) {
      this.selectionsAll1 = rows
    },
    selectionChange2(rows) {
      this.selectionsAll2 = rows
    },
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach((key) => {
          // 给右边数据赋值
          this.formData[key] = res.data[key]
        })
        this.tableData2 = this.formData.returnGoodsList
        this.tableData1 = this.formData.bankList
        this.isShow = true
        this.loading = false
        this.$refs.MultiUserSelect.setDefaultData()
        this.tableData2.forEach((ele, index) => {
          if (ele.isDefault == '1') {
            this.tableDefaultRow = index
          }
        })
      })
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.returnGoodsList = this.$deepClone(this.tableData2)
          this.formData.bankList = this.tableData1
          // if (this.formData.returnGoodsList.length <= 0) {
          //   this.$message.warning('请添加退货信息')
          //   return
          // }
          if (this.tableData2.length > 0 && this.tableData2.filter(item => !item.deliveryTypeCode).length > 0) {
            this.$message.warning('交货方式不能为空')
            return
          }
          // } else if (this.tableData2.filter(item => !item.consignee).length > 0) {
          //   this.$message.warning('收货人不能为空')
          //   return
          // } else if (this.tableData2.filter(item => !item.contract).length > 0) {
          //   this.$message.warning('联系方式不能为空')
          //   return
          // } else if (this.tableData2.filter(item => !item.receiveAddress).length > 0) {
          //   this.$message.warning('收货地址不能为空')
          //   return
          // }
          addOrUpdate(this.formData).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.getList() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    add1() {
      this.tableData1.push({
        dictLabel: ''
      })
    },
    remove1() {
      this.selectionsAll1.forEach(item => {
        this.tableData1.splice(this.tableData1.indexOf(item), 1)
      })
    },
    add2() {
      const row = {
        dictLabel: '',
        isDefault: '0'
      }
      if (!this.tableData2.some(item => item.isDefault + '' == '1')) {
        row.isDefault = '1'
        this.tableDefaultRow = this.tableData2.length
      }
      this.tableData2.push(row)
    },
    remove2() {
      this.selectionsAll2.forEach(item => {
        this.tableData2.splice(this.tableData2.indexOf(item), 1)
      })
      // 找到 tableData2 里 isDefault 是 1 的 ，找到它的index
      if (this.tableData2.filter(item => item.isDefault == 1).length > 0) {
        this.tableDefaultRow = this.tableData2.indexOf(this.tableData2.filter(item => item.isDefault == 1)[0])
      } else { // 如果 isDefault 是 1 的 被删除了
        this.tableDefaultRow = 0
      }
      this.chooseDefault(null, this.tableDefaultRow)
    },
    addRow() {
      // 先删除最后一行
      this.tableData.splice(this.tableData.length - 1, 1)
      // 再新增一行有输入框的
      // 最后补上一行空的
      const row2 = [
        {
          dictLabel: '',
          dictValue: ''
        },
        {
          isAdd: true
        }
      ]
      this.tableData.push(...row2)
    },
    removeRow(row) {
      this.tableData.splice(this.tableData.indexOf(row), 1)
    },
    chooseDefault(row, currentIndex) {
      this.tableData2.forEach((ele, index) => {
        if (index == currentIndex) {
          ele.isDefault = '1'
        } else {
          ele.isDefault = '0'
        }
        return ele
      })
    }
  }
}
</script>

<style lang="less" scoped>
.table_container1 {
  padding-bottom: 20px !important;
}
</style>
